<template>
	<view class="wrapper">
		<view class="common-view">
			<view class="common-detail">
				<uni-icons type="chat-filled" size="24" color="#3FA7F9"></uni-icons>
				工单内容：{{ valiFormData.orderContext }}
			</view>
			<view class="common-detail">
				<uni-icons type="upload-filled" size="24" color="#3FA7F9"></uni-icons>
				发起时间：{{ valiFormData.createDatetime }}
			</view>
			<view class="common-detail">
				<uni-icons type="camera-filled" size="24" color="#3FA7F9"></uni-icons>
				预警图片：<button type="default" @click="buttonClick" class="report-button" size="mini"
					style="margin-left: 0">
					预览图片
				</button>
			</view>
		</view>

		<div class="space"></div>

		<view class="rule-form">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="0">
				<uni-forms-item label="" required name="handlingSuggestions">
					<uni-easyinput type="textarea" v-model="valiFormData.handlingSuggestions" placeholder="请输入处理意见" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit(valiForm)">处理</button>
		</view>

		<!-- 		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
					class="text">
					<image aspectFit :src="valiFormData.imageUrl"> </image>
				</text></view>
		</uni-popup> -->
		<view v-if="showPreview" class="preview-modal">
			<view class="close-btn" @click="showPreview = false">✕</view>
			<movable-area class="movable-area" :scale-area="true">
				<movable-view direction="all" :scale="true" :scale-min="1" :scale-max="4" :scale-value="scale"
					@scale="onScale">
					<image :src="valiFormData.imageUrl" mode="widthFix"></image>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		HOST
	} from "../../static/js/const";

	let showPreview = ref(false);
	let scale = ref(1);
	
	const valiForm = ref(null);
	const range = ref([{
			value: 0,
			text: "已处理",
		},
		{
			value: 1,
			text: "已拒绝",
		},
	]);

	let type = ref("");
	let valiFormData = ref({
		orderContext: "",
		orderId: "",
		handlingSuggestions: "",
		id: "",
		beginDatetime: "",
		imageUrl: "",
	});
	const popup = ref();

	const rules = ref({
		handlingSuggestions: {
			rules: [{
				required: true,
				errorMessage: "处理意见不能为空",
			}, ],
		},
	});

	function change(e) {
		console.log("e:", e);
	}

	const buttonClick = () => {
		// popup.value.open("center");
		showPreview.value = true;
		scale.value = 1; // 每次打开重置缩放
	};

	function submit(ref) {
		console.log("valiFormData.value.handlingSuggestions:");
		console.log(valiFormData.value);

		if (!valiFormData.value.handlingSuggestions) {
			uni.showToast({
				title: `请输入处理意见`,
				icon: "error",
			});
		}

		ref
			.validate()
			.then((res) => {
				uni.request({
					url: `${HOST}/task/order/step/deal`,
					method: "POST",
					header: {
						"content-type": "application/json",
						Authorization: "Bearer " + uni.getStorageSync("accessToken"),
					},
					data: {
						id: valiFormData.value.orderId,
						handlingSuggestions: valiFormData.value.handlingSuggestions,
					},
					success: (res) => {
						if (res.data.status === "OK" && res.data.flag) {
							uni.showToast({
								title: `操作成功`,
								icon: "success",
							});

							setTimeout(() => {
								uni.navigateBack({
									delta: 1, // 返回上一页
								});
							}, 1000);
						} else if (Number(res.data.code) === 401) {
							uni.showToast({
								title: "登录超时",
								icon: "error",
							});
							uni.removeStorageSync("accessToken");
							uni.reLaunch({
								url: "/pages/login/index", // 这里的URL是登录页面的路径
							});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "error",
							});
						}
					},
					fail: (err) => {
						console.error("请求失败", err);
						uni.showToast({
							title: "连接失败",
							icon: "error",
						});
					},
				});
			})
			.catch((err) => {
				console.log("err", err);
			});
	}

	onLoad((option) => {
		// 获取查询参数
		// valiFormData.value.id = option.id;
		type.value = option.type;

		uni.request({
			url: `${HOST}/task/order/step/voDetail`,
			method: "POST",
			header: {
				"content-type": "application/json",
				Authorization: "Bearer " + uni.getStorageSync("accessToken"),
			},
			data: {
				id: option.id,
			},
			success: (res) => {
				if (res.data.status === "OK" && res.data.flag) {
					valiFormData.value = res.data.data;
					valiFormData.value.imageUrl = valiFormData.value.imageUrl.replace(
						/192\.168\.66\.104:6080/g,
						"111.23.104.94:18088"
					).replace(
						/192\.168\.66\.101:6080/g,
						"111.23.104.94:18090"
					);
					valiFormData.value.orderId = option.id;
				} else if (Number(res.data.code) === 401) {
					uni.showToast({
						title: "登录超时",
						icon: "error",
					});
					uni.removeStorageSync("accessToken");
					uni.reLaunch({
						url: "/pages/login/index", // 这里的URL是登录页面的路径
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "error",
					});
				}
			},
			fail: (err) => {
				console.error("请求失败", err);
				uni.showToast({
					title: "连接失败",
					icon: "error",
				});
			},
		});
	});
</script>

<style lang="scss" scoped>
	.rule-form {
		border-radius: $myuni-border-radius-base;
		padding: $myuni-spacing-lg;
		background-color: $myuni-bg-color;
		margin-bottom: $myuni-spacing-lg;
		// box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
	}

	.uni-forms::v-deep .uni-select__input-text {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-textarea-placeholder {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.rule-form::v-deep .uni-forms-item__label {
		display: none;
	}

	.rule-form::v-deep .is-input-border {
		border: 1px solid $myuni-bg-color-grey !important;
	}

	.rule-form::v-deep .uni-select {
		border: 1px solid $myuni-bg-color-grey !important;
	}

	.common-detail {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}
	
	/*图片预览*/
	.preview-modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0, 0, 0, 0.9);
	  z-index: 999;
	}
	.movable-area {
	  width: 100%;
	  height: 100%;
	}
	movable-view {
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	movable-view image {
	  max-width: 100%; /* 限制图片最大宽度 */
	}
	.close-btn {
	  position: absolute;
	  top: 40rpx;
	  right: 40rpx;
	  color: white;
	  font-size: 40rpx;
	  z-index: 1000;
	}
</style>